<template>
  <div ref="target">
    <img :src="getImagePath()" @click="handleMouseClick" >
  </div>
</template>
 
<script>
//import { ref } from 'vue'
//import { useMouseInElement } from '@vueuse/core'

export default {
  name: 'ShowUIFromCV',
  methods: {
    getImagePath() {
      return this.imageUrl;
    },

    handleMouseClick(event) {
      /* 获取鼠标相对于页面的位置
       const pageX = event.pageX;
       const pageY = event.pageY;
       获取鼠标相对于容器的位置
       const clientX = event.clientX;
       const clientY = event.clientY;
       */
      const mouseX = event.offsetX; 
      const mouseY = event.offsetY;
      
      if (this.curMainUI == 1) {
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120  && mouseY < 120 + 80) {
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
        } 
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 200 && mouseY < 200 + 80) {
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 280 && mouseY < 280 + 80) {
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
        }
      }
      else if (this.curMainUI == 2) {
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
        } 
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 425 && mouseY < 425 + 80) {
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 505 && mouseY < 505 + 80) {
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
        }
        // 二级菜单切换
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 208 && mouseY < 208 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 1 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 1;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 280 && mouseY < 280 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 2 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 352 && mouseY < 352 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 3 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
        }
      }
      else if (this.curMainUI == 3) {
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120 && mouseY < 120 + 80) {
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 505 && mouseY < 505 + 80) {
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
          this.curChildUI = 0;
        }
        // 二级菜单切换
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 288 && mouseY < 288 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 1 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 1;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 360 && mouseY < 360 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 2 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 2;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 432 && mouseY < 432 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 3;
        }
        else {
          // 界面Tab切换
          if (this.curChildUI == 3) {
            if (mouseX > 89 && mouseX < 89 + 102 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 1 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 191 && mouseX < 191 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_"
               + 3 + "_" + 3 + "_" + 2 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 311 && mouseX < 311 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 3 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 431 && mouseX < 431 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 4 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
          }
        }

      }
      else if (this.curMainUI == 4) {
        console.log({ mouseX, mouseY });
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
          this.curChildUI = 0;
        }        
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120 && mouseY < 120 + 80) {
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 200 && mouseY < 200 + 80) {
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 0;
        }
        // 二级菜单切换
        else {
          // 界面Tab切换
          if (mouseX > 89 && mouseX < 89 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 1 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 199 && mouseX < 199 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 2 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 529 && mouseX < 529 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 4 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 309 && mouseX < 309 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 5 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 639 && mouseX < 639 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 6 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 419 && mouseX < 419 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 7 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 859 && mouseX < 859 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 8 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
        }
         
      }
    }
  },
  data() {
    return {
      imageUrl: require('@/assets/样本.png'),
      curMainUI: 1,
      curChildUI: 0,
      uiStr: "",
    }
  },
}
</script>